<template>
	<view class="fine-care">
		<navBar :title="$t('gently.dry')"></navBar>
		<view class="list-warp">
			<view class="list-item bg_color_f w_90" v-for="(item,index) in listData" :key="item.id"
				@click="toTimeSelection(item.id)">
				<view>{{item.title}}</view>
				<view class="timer" v-if="item.id != 6">默认{{item.time}}</view>
				<uni-icons v-if="currentTab === index" class="icon-active" type="checkbox-filled" size="15"
					color="#AF9453"></uni-icons>
			</view>
		</view>

		<!-- <view class="reserve" @click="openTimePicker">预约</view> -->
		<!-- 打开时间选择器 -->
		<!-- <CustomPicker ref="customTimePicker" @confirm="hanleConfirm"></CustomPicker> -->

		<!-- 协议弹窗 -->
		<PopupUsernotice ref="usernotice" @confirm="handleUsernotice"></PopupUsernotice>
	</view>
</template>

<script>
	import CustomPicker from '@/componets/CustomPicker.vue';
	import PopupUsernotice from '@/componets/PopupUsernotice.vue';
	import {
		setDeviceWorkMode
	} from '@/api/home.js'

	export default {
		components: {
			CustomPicker,
			PopupUsernotice
		},
		data() {
			return {
				sn: '', //设备sn
				currentTab: '', // 当前选中的Tab索引
				listData: [{
						id: 1,
						title: '羊毛',
						time: '60分钟'
					},
					{
						id: 2,
						title: '棉麻',
						time: '60分钟'
					},
					{
						id: 3,
						title: '羽绒',
						time: '60分钟'
					},
					{
						id: 4,
						title: '化纤',
						time: '60分钟'
					},
					{
						id: 5,
						title: '母婴',
						time: '60分钟'
					},
					{
						id: 6,
						title: '自动烘干'
					},
				]
			};
		},
		onLoad(options) {
			this.sn = options.sn;
		},
		methods: {
			// openTimePicker() {
			// 	this.$refs.customTimePicker.open();
			// },

			// hanleConfirm(time){
			// 	console.log('time==',time)	
			// 	this.config.Toast('该时段已被预约');
			// },
			// 打开同意协议弹窗
			openUsernotice() {
				this.$refs.usernotice.open();
			},
			handleUsernotice() {
				this.config.path('/pagesA/home/quickCare/careing')
			},
			toTimeSelection(id) {
				this.config.path('/pagesA/home/timeSelection/timeSelection?sn=' + this.sn + '&id=' + id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fine-care {
		.list-warp {
			margin-top: 30rpx;

			.list-item {
				padding: 25rpx 40rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
				margin-bottom: 25rpx;
				position: relative;

				.timer {
					color: $uni-theme-color;
					font-size: 26rpx;
				}
			}

			.active {
				border: 3rpx solid #AF9453;
			}

			.icon-active {
				position: absolute;
				right: -1px;
				top: -6px;
			}
		}
	}
</style>